import {
  Clock20Filled,
  Options20Filled,
  PersonAvailable24Filled,
  Send16Filled,
  ShareAndroid24Filled,
  ToggleLeft48Filled,
} from "@vicons/fluent";
import { NButton, NGi, NGrid, NIcon, NPopover } from "naive-ui";
import {
  isAddNodeMenu,
  x,
  y,
  showAddMenu,
  addDesignNode,
  nodeTypeForValue,
} from "@/hooks/useWflow";
import { DesignNode } from "@/types";
import { uuid } from "@/utils/index";
export default defineComponent({
  name: "AddNodeMenu",
  setup() {
    const handleOutside = (e: MouseEvent) => {
      let { x, y } = e;
      showAddMenu(x, y, false);
    };
    const handleAddNode = (type: string) => {
      let node: DesignNode;
      switch (type) {
        case "CONDITIONS":
          break;
        case "CONCURRENT":
          break;
        case "DELAY":
          break;
        case "TRIGGER":
          break;
        default:
          node = {
            id: uuid(),
            parentId: "",
            type,
            name: nodeTypeForValue[type],
          };
          addDesignNode(node);
      }
    };
    return () => (
      <NPopover
        show={isAddNodeMenu.value}
        x={x.value}
        y={y.value}
        placement="right"
        trigger="manual"
        onClickoutside={(e: MouseEvent) => {
          handleOutside(e);
        }}
      >
        <h3>添加流程节点</h3>
        <div class=" pt-2 pb-1">
          <NGrid xGap={12} yGap={12} cols={3}>
            <NGi>
              <NButton
                block
                strong
                secondary
                type="tertiary"
                style={{
                  justifyContent: "start",
                }}
                onClick={() => {
                  handleAddNode("APPROVAL");
                }}
              >
                <NIcon
                  size="22"
                  color="#FF943E"
                  component={PersonAvailable24Filled}
                />
                <span class="ml-1">审批人</span>
              </NButton>
            </NGi>
            <NGi>
              <NButton
                class=" justify-start"
                block
                strong
                secondary
                type="tertiary"
                style={{
                  justifyContent: "start",
                }}
                onClick={() => {
                  handleAddNode("CC");
                }}
              >
                <NIcon size="22" color="#3296FA" component={Send16Filled} />
                <span class="ml-1">抄送人</span>
              </NButton>
            </NGi>
            <NGi>
              <NButton
                class=" justify-start"
                block
                strong
                secondary
                type="tertiary"
                style={{
                  justifyContent: "start",
                }}
                onClick={() => {
                  handleAddNode("CONDITIONS");
                }}
              >
                <NIcon
                  size="22"
                  color="#15BC83"
                  component={ShareAndroid24Filled}
                />
                <span class="ml-1">条件分支</span>
              </NButton>
            </NGi>
            <NGi>
              <NButton
                class=" justify-start"
                block
                strong
                secondary
                type="tertiary"
                style={{
                  justifyContent: "start",
                }}
                onClick={() => {
                  handleAddNode("CONCURRENT");
                }}
              >
                <NIcon size="22" color="#718DFF" component={Options20Filled} />
                <span class="ml-1">并行分支</span>
              </NButton>
            </NGi>
            <NGi>
              <NButton
                class=" justify-start"
                block
                strong
                secondary
                type="tertiary"
                style={{
                  justifyContent: "start",
                }}
                onClick={() => {
                  handleAddNode("DELAY");
                }}
              >
                <NIcon size="22" color="#F25643" component={Clock20Filled} />

                <span class="ml-1">延迟等待</span>
              </NButton>
            </NGi>
            <NGi>
              <NButton
                class=" justify-start"
                block
                strong
                secondary
                type="tertiary"
                style={{
                  justifyContent: "start",
                }}
                onClick={() => {
                  handleAddNode("TRIGGER");
                }}
              >
                <NIcon
                  size="25"
                  color="#79C612"
                  component={ToggleLeft48Filled}
                />

                <span class="ml-1">触发器</span>
              </NButton>
            </NGi>
          </NGrid>
        </div>
      </NPopover>
    );
  },
});
